<template>
    <div class="collection">
        <header>
            <h4>收藏</h4>
        </header>
        <section>
           <div class="pic-box">
                <img src="../../static/images/Card2.png" alt="">
                <span class="icon"></span>
           </div>
        </section>
        <section>
            <ul>
                <li style="padding: 10px 20px ; border-bottom: 1px solid #f00;" v-for="item in lists" :key="item.id">
                    {{ item.name }}
                </li>
            </ul>

        </section>

        <section>
            <ul>
                <li v-for="item in arr" :key="item.id">
                        <a href="#/">
                           <div>
                            <img :src="item.src" alt="">
                            <span>{{ item.text }}</span>
                           </div>
                           <div>
                            <span class="icon"></span>
                           </div>
                        </a>
                </li>   
            </ul>
        </section>
    </div>
</template>

<script>
export default {
    data(){
        return {
            arr: [
                {src: require('../../static/images/img/1.png'), text: '轨迹',    text_en: 'Tracks',     id: '1'},
                {src: require('../../static/images/img/2.png'), text: '艺术家',    text_en: 'Artist',     id: '2'},
                {src: require('../../static/images/img/3.png'), text: '专辑',    text_en: 'Albums',     id: '3'},
                {src: require('../../static/images/img/4.png'), text: '播放列表', text_en: 'Playlists',  id: '4'},
                {src: require('../../static/images/img/5.png'), text: '下载',  text_en: 'Download',   id: '5'}
            ],
            lists: []
        }
    },
    created(){
        let user_str = localStorage.getItem('_USER')
        let songs_str = localStorage.getItem('_SONGS')
        if(user_str){
            let user = JSON.parse(user_str)
            let id = user.id;
            if(songs_str) {
                let songs = JSON.parse(songs_str)
                let newArr  = songs.filter(item=> item.user_id == id )
                this.lists = newArr;
            }
        }
        
    },
    //组件内置路由守卫
    beforeRouteEnter(to,from,next){
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        let auto_token = localStorage.getItem('_TOKEN');
        if(auto_token){
            // 有token就访问该组件
             next();
        }
        else {
             if(confirm('需要登录才能继续访问')){
                 next({path: '/login'})
             }
        }
    }

    
}
</script>

<style lang="less">
@import "@/static/less/variable.less";
.collection {
    padding: @pad;
    header {
        height: 60px;
        display: flex;
        align-items: center;
        h4 {
            font-weight: normal;
            font-size: 20px;
        }
    }
    section {
        .pic-box {
            width: 100%;
            position: relative;
            img {
                width: 100%;
            }
            .icon {
                 width: 35px;
                 height: 35px;
                 position: absolute;
                 left: 20px;
                 bottom: 30px;
                 z-index: 1000;
                 background-size: cover;
                 background-repeat: no-repeat;
                 background-image: url(../../static/images/play2.png);
            }
        }

        ul {
            width: 100%;
            margin-top: 20px;
            li {
                a {
                    display: flex;
                    width: 100%;
                    text-decoration: none;
                    color: #000;
                    font-size: 16px;
                    justify-content: space-between;
                    height: 60px;
                    align-items: center;
                    img {
                        width: 24px;
                        margin-right: 10px;
                    }
                    .icon {
                        display: inline-block;
                        width: 24px;
                        height: 24px;
                        background-size: cover;
                        background-image: url(../../static/images/i-right.png);
                    }
                }
            }
        }
    }
}
</style>